<template>
	<view class="padding-bottom">
		<u-navbar title="积分钱包" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="transparent">
		</u-navbar>
		<view class="card-item">
			<view class="flex align-center margin-lr-sm padding-tb-sm top-box">
				<image src="/static/my/points/icon1.png" class="img-48"></image>
				<view class="margin-left-sm font-16 text-black3 text-bold">积分</view>
			</view>
			<view class="flex justify-between text-center margin-tb margin-lr text-black3">
				<view class="flex-1">
					<view class="font-13 text-bold">可使用积分</view>
					<view class="font-24 text-bold margin-top-xs">
						<text>{{walletInfo.shopPoints ||　0}}</text>
					</view>
					<view class="details-btn" @click="toWallet(1, '积分明细', 0)">明细</view>
					<view class="details-btn" @click="toExchange" v-if="userInfo.userType != 1">行权</view>
				</view>
				<view class="flex-1">
					<view class="font-13 text-bold">待赠送积分</view>
					<view class="font-24 text-bold margin-top-xs">{{waitPoints ||　0}}</view>
					<view class="details-btn" @click="toWallet(1, '积分明细', 1)">明细</view>
					<view class="details-btn" @click="advancePoint">加速积分</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="card-item" v-if="userInfo.userType == 1">
			<view class="flex align-center margin-lr-sm padding-tb-sm top-box">
				<image src="/static/my/points/icon1.png" class="img-48"></image>
				<view class="margin-left-sm font-16 text-black3 text-bold">百积分</view>
			</view>
			<view class="flex text-center margin-tb margin-lr text-black3">
				<view>
					<view class="font-13 text-bold">可使用积分</view>
					<view class="font-24 text-bold margin-top-xs">
						<text>{{walletInfo.centesimal ||　0}}</text>
					</view>
					<view class="details-btn" @click="toWallet(2, '百积分明细', 0)">明细</view>
				</view>
				<view class="m-l-50">
					<view class="font-13 text-bold">待赠送积分</view>
					<view class="font-24 text-bold margin-top-xs">{{baiWaitPoints ||　0}}</view>
					<view class="details-btn" @click="toWallet(2, '百积分明细', 1)">明细</view>
				</view>
			</view>
		</view> -->
		
		<view class="card-item">
			<view class="flex align-center margin-lr-sm padding-tb-sm top-box">
				<image src="/static/my/points/icon2.png" class="img-60"></image>
				<view class="margin-left-sm font-16 text-black3 text-bold">购物积分</view>
			</view>
			<view class="flex justify-between text-center margin-tb margin-lr text-black3">
				<view class="flex-1">
					<view class="font-13 text-bold">可使用积分</view>
					<view class="font-24 text-bold margin-top-xs">
						<text>{{walletInfo.buyGoodCoupon ||　0}}</text>
					</view>
					<view class="details-btn" @click="toWallet(8, '购物积分明细', 0)">明细</view>
					<view class="details-btn" @click="toExchange1">去兑换</view>
				</view>
				<view class="flex-1">
					<view class="font-13 text-bold">过期积分</view>
					<view class="font-24 text-bold margin-top-xs">
						<text>{{expiredPointData ||　0}}</text>
					</view>
					<view class="details-btn" @click="toWallet(8, '过期积分明细', 2)">明细</view>
				</view>
				<view class="flex-1">
					<view class="font-13 text-bold">待赠送积分</view>
					<view class="font-24 text-bold margin-top-xs">{{buyWaitPoints ||　0}}</view>
					<view class="details-btn" @click="toWallet(8, '购物积分明细', 1)">明细</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { wallet, findBuyReleasedAmount,pointsExpiredTotal } from '@/common/api/customer.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				walletInfo: {},
				waitPoints: 0,
				baiWaitPoints: 0,
				buyWaitPoints: 0,
				expiredPointData: null
			};
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
		onLoad() {
			this.getFindBuyReleasedAmount(1)
			this.getFindBuyReleasedAmount(8)
			if(this.userInfo.mobile == '19999999999') {
				this.getFindBuyReleasedAmount(2)
			}
		},
		onShow() {
			this.getWallet()
			this.getExpiredPointTotal()
		},
		methods: {
			// 过期积分数量请求
			getExpiredPointTotal(){
				pointsExpiredTotal().then(res => {
					if(res.code === 200){
						this.expiredPointData = res.data;
					}
				})
			},
			advancePoint(){
				uni.navigateTo({
					url: '/pages/my/wallet/advancePointLog'
				})
			},
			getFindBuyReleasedAmount(type) {
				findBuyReleasedAmount({walletIds: type}).then(res => {
					if(res.code == 200) {
						if(type == 1) {
							this.waitPoints = res.data || 0
						} 
						if(type == 2) {
							this.baiWaitPoints = res.data || 0
						} 
						if(type == 8) {
							this.buyWaitPoints = res.data || 0
						} 
					}
				})
			},
			toExchange() {
				uni.navigateTo({
					url: '/pages/my/wallet/exchangeContribution'
				})
			},
			toExchange1() {
				// this.$msg('暂未开通')
				uni.navigateTo({
					url: '/pages/points/pointsIndex'
				})
			},
			toWallet(walletType, title, tabIndex) {
				uni.navigateTo({
					url: '/pages/my/wallet/pointsRecords?walletType=' + walletType + '&title=' + title  + '&tabIndex=' + tabIndex
				})
			},
			// 获取用户钱包
			getWallet() {
				wallet().then(res => {
					this.walletInfo = res.data || {}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('/static/my/points/bg2.png');
		background-size: 100% 100%;
	}
</style>
<style lang="scss" scoped>
.card-item {
	background-image: url('/static/my/points/bg1.png');
	background-size: 100% 100%;
	height: 386rpx;
	margin: 30rpx;
	.top-box {
		border-bottom: 1rpx solid #fdaea4;
	}
}
.details-btn {
	width: 138rpx;
	height: 48rpx;
	background: #FFFFFF;
	border-radius: 100rpx;
	border: 1rpx solid #FA3121;
	font-size: 24rpx;
	color: #FA3121;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	margin-top: 14rpx;
}
</style>
